<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
            "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
	<head>
		<title>Model List Insert Demo</title>
        <style type='text/css'>
            body {font-family: verdana}
            li {border: solid 1px gray; padding: 5px; width: 250px;}
			li a {color: red; font-weight: bold;}
			p {width: 400px;}
        </style>
	</head>
	<body>
		<div id="demo-instructions">
			<h1>Model List Demo</h1>
			<p>This demo shows how you might use Lists to implement deleting a list
			of contacts.</p>
		</div>
<div id="demo-html">
<div id='contacts'></div>
<div id='update'></div>
</div>
		
		
<script type='text/javascript' 
        src='../../../steal/steal.js'>   
</script>
<script type='text/javascript' id="demo-source">   
steal('jquery/model',
      'jquery/dom/fixture',
      'jquery/model/list',
	  function(){

// =============== SETUP FIXTURES =============== 

$.fixture("GET /recipes.json", function(){
	return [[{'id': 1,'name' : 'Justin Meyer','birthday': '1982-10-20'},
	       {'id': 2,'name' : 'Brian Moschel','birthday': '1983-11-10'},
	       {'id': 3,'name' : 'Alex Gomes','birthday': '1980-2-10'}]];
});
$.fixture("PUT /recipes/{id}.json", function(){
	return {};
})

// =============== Contact Model =============== 

$.Model("Contact",{
	attributes : { 
		birthday : 'date'
	},
	convert : {
		// a converter to handle dates like 12-12-2012
		date : function(raw){
			if(typeof raw == 'string'){
				var matches = raw.match(/(\d+)-(\d+)-(\d+)/)
				return new Date( +matches[1], 
				                 (+matches[2])-1, 
				                 +matches[3] )
			}else if(raw instanceof Date){
				return raw;
			}
		}
	},
	findAll : "/recipes.json",
	update : "/recipes/{id}.json"
},{
	ageThisYear : function(){
		return new Date().getFullYear() - 
		      this.birthday.getFullYear()
	},
	getBirthday : function(){
		return ""+this.birthday.getFullYear()+
			"-"+(this.birthday.getMonth()+1)+
			"-"+this.birthday.getDate();
	}

});

// =============== updaterWidget =============== 

makeAgeUpdater = function(contact){
	var updater = $("#update")
	
	// clear the old update content and add the contact's bday
	updater.html("")
	       .append(contact.name+"'s birthday");
	
	// create an input element
	$('<input/>')
		// set the contacts birthday as val
		.val(contact.attr("birthday"))
		// when the input changes, update the contact with the value
		.change(function(){
			contact.update({
				'birthday': this.value
			})
		})
		// add the input to the updater
		.appendTo(updater)
};

// =============== Listen for updates =============== 

Contact.bind("updated", function(ev, contact){
	
	// use the list to get the instance from the element
    contact.elements($('#contacts'))
      .html(contact.name+" "+contact.ageThisYear()+
          " <a>Show</a>");
});

// =============== Draw out Contacts =============== 

Contact.findAll({},function(contacts){
	var contactsEl = $('#contacts'),
		html = [], 
		contact;
	
	// collect contact html
	for(var i =0; i < contacts.length;i++){
		contact = contacts[i]
	html.push("<li class='contact ",
		contact.identity(), //add the identity to the className manually
		"'>",
		contact.name+" "+contact.ageThisYear()+
	                " <a>Show</a>",
		"</li>")
	}
	// insert contacts html
	contactsEl.html(html.join(""))
	
	contactsEl.delegate("li","click", function(){
	 // use the contacts list to get the
	 // contact from the clicked element
	 var contact = contacts.get(this)[0]
	 makeAgeUpdater( contact );
	});

});

})

</script>
	</body>
</html>